<template>
  <div class="evaluate">
    <el-container v-loading="loading">
      <el-container>
        <el-main>
          <el-card class="box-card">
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
              <el-button style="margin-left:20px;" @click.native="Time">搜索</el-button>
              <el-button @click="batchEvaluation" style="float:right;margin-right:15px;">批量评价</el-button>
            </div>
            <el-col :span="8" v-for="(item,index) in tabData" :key="index" class="box-col">
              <el-card shadow="hover">
                <div class="box-name">
                  <span class="spanName">姓名 : {{item.leaderName}}</span>
                  <span class="spanPhone" v-if="item.phone">联系电话 : {{item.phone}}</span>
                </div>
                <div class="box-basename">
                  <p>基地名称 : {{item.baseName}}</p>
                </div>
                <div class="boxtime-wrapper">
                  <p>预约开始时间 : {{item.startTime}}</p>
                  <p>预约结束时间 : {{item.endTime}}</p>
                  <p>签到时间 : {{item.signInTime}}</p>
                  <p>签退时间 : {{item.signOutTime}}</p>
                </div>
                <div class="box-make">
                  <p>实践人数 : {{item.count}}</p>
                  <el-button @click="Seetheevaluation(item,index)" style="float:right">查看</el-button>
                </div>
              </el-card>
            </el-col>
            <div style="text-align: center;" v-if="tabData.length == 0" class="notavailable">暂无数据</div>
          </el-card>
          <el-dialog title="评价列表" :visible.sync="dialogTableVisible">
            <el-radio-group v-model="radio1" @change="qwe" style="padding-bottom:10px;">
              <el-radio-button label="未评价"></el-radio-button>
              <el-radio-button label="已评价"></el-radio-button>
            </el-radio-group>
            <div class="List-wrapper" v-for="(item,index) in gridData" :key="index">
              <div class="dialoa-name">
                <span class="spanOne">姓名 : {{item.studentName}}</span>
                <span class="spanthree">所在学校 : {{item.schoolName}}</span>
                <span v-if="item.status === 'passed'" class="spanTwo">{{item.commentTime}}</span>
              </div>
              <div v-if="item.score" class="Getscore" style="margin-top:20px;display: flex;">
                <span style="line-height:20px;margin-right:15px;">综合评分</span>
                <el-rate v-model="item.score" disabled show-score text-color="#ff9900"></el-rate>
                <div class="on-off" style="justify-content: flex-end;">
                  <!-- <el-switch
                        v-if = "item.content"
                        @change="contentSwitch"
                        v-model="item.value2"
                        active-text="已隐藏"
                        inactive-text="展示中">
                  </el-switch>-->
                </div>
              </div>
              <div v-if="item.content" style="padding-top:15px;" class="dialoa-content">
                <p v-if="!item.value2">评价内容 : {{item.content}}</p>
              </div>
              <div v-if="!item.content" class="block" style="display:flex;padding-top:20px;">
                <span class="demonstration" style="margin-right:20px;line-height:20px;">综合评分</span>
                <el-rate v-model="gridData[index].value1"></el-rate>
              </div>
              <div
                v-if="!item.content"
                class="dialoa-evaluate"
                style="display:flex;margin-top:20px;"
              >
                <span style="width:40px;">评价</span>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="gridData[index].textarea"
                ></el-input>
              </div>
              <div class="but" style="text-align: right;padding-top:10px;">
                <el-button
                  v-if="!item.content"
                  type="primary"
                  @click="submitevaluate(item,index)"
                >提交</el-button>
              </div>
            </div>
            <div
              style="text-align: center;padding: 30px;"
              v-if="gridData.length == 0"
              class="title"
            >
              <p>暂无数据</p>
            </div>
          </el-dialog>
          <el-dialog title="批量评价" :visible.sync="dialogTableVisibleone" :before-close="handleClose">
            <el-form
              label-width="100px"
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item label="日期">
                <div class="block">
                  <el-date-picker
                    @change="asdasd"
                    v-model="ruleForm.Timeone"
                    type="date"
                    placeholder="不选择代表所有日期"
                  ></el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="学校">
                <el-select v-model="value" clearable placeholder="不选择代表所有学校">
                  <el-option
                    v-for="item in options"
                    :key="item.oid"
                    :label="item.oname"
                    :value="item.oid"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评分">
                <el-rate
                  style="margin-top:10px;"
                  v-model="ruleForm.value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </el-form-item>
              <el-form-item label="评语" prop="remark">
                <el-input type="textarea" :rows="4" placeholder="请输入评语" v-model="ruleForm.remark"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-pagination
            style="float:right;padding:15px 0;"
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Vue from "vue";
import transitionTime from "../../transitionTime.js";
export default {
  data() {
    var checkremark = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入评语"));
      } else {
        callback();
      }
    };
    return {
      // // 默认显示第几页
      currentPage: 1,
      // // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 10,
      radio1: "未评价",
      gridData: [],
      tabData: [],
      loading: false,
      value1: [],
      dialogTableVisible: false,
      dialogTableVisibleone: false,
      user: {},
      item: {},
      ruleForm: {
        value: 5,
        Timeone: "",
        remark: ""
      },
      rules: {
        remark: [{ validator: checkremark, trigger: "blur" }]
      },
      options: [],
      value: ""
    };
  },
  mounted() {
    this.data();
  },
  methods: {
    data() {
      this.loading = true;
      this.user = JSON.parse(sessionStorage.getItem("user"));
      var nowdate = new Date();
      var date = new Date(nowdate.getTime() - 30 * 24 * 3600 * 1000);
      this.value1.push(date);
      this.value1.push(nowdate);
      this.Time();
    },
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    //提交
    submitevaluate(item) {
      let Add = {
        content: item.textarea,
        score: item.value1 * 2
      };
      if (!item.textarea) {
        this.open1("失败", "请添加内容", "warning");
      } else if (!item.value1) {
        this.open1("失败", "请选择评分", "warning");
      } else {
        this.$api.Basemanager.Submitcomments(item.id, Add)
          .then(res => {
            if (res.code === 200) {
              this.gridData = this.gridData.filter(
                data => data.studentName !== item.studentName
              );
              this.open1("成功", "添加成功", "success");
              this.loading = false;
            } else {
              this.open1("失败", "添加失败", "warning");
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    //请求对应日期的数据
    Time() {
      this.loading = true;
      this.currentPage = 1;
      this.totalCount = 10;
      let Time = [];
      let base = JSON.parse(sessionStorage.getItem("user"));
      for (let i = 0; i < this.value1.length; i++) {
        Time.push(this.value1[i].toJSON());
      }
      if (Time.length === 0) {
        this.open1("失败", "请选择日期", "warning");
      } else {
        this.$api.Basemanager.evaluateAXIOS(
          Time[0],
          Time[1],
          base.baseId,
          this.currentPage,
          10
        )
          .then(res => {
            this.tabData = res.data.rows;
            if (res.data.pageCount) {
              this.totalCount = res.data.pageCount * 10;
            } else {
              this.totalCount = 10;
            }
            this.transitionTime();
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
          });
        this.loading = false;
      }
    },
    //时间转换
    transitionTime() {
      for (let i = 0; i < this.tabData.length; i++) {
        this.tabData[i].startTime = transitionTime(this.tabData[i].startTime);
        this.tabData[i].endTime = transitionTime(this.tabData[i].endTime);
        this.tabData[i].signInTime = transitionTime(this.tabData[i].signInTime);
        this.tabData[i].signOutTime = transitionTime(
          this.tabData[i].signOutTime
        );
      }
    },
    asdasd(item) {
      let Time = item.toJSON();
      this.$api.Basemanager.schoolList(this.user.baseId, Time)
        .then(res => {
          if(res.code == 200){
            this.value = ''
            let hash = {}; 
            this.options = res.data.reduce((preVal, curVal) => {
              hash[curVal.oname] ? '' : hash[curVal.oname] = true && preVal.push(curVal); 
              return preVal
            }, [])
            console.log(this.options)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    contentSwitch(item) {
      console.log(item);
    },
    //切换角色
    qwe() {
      if (this.radio1 === "已评价") {
        this.status("passed");
      } else {
        this.status("not_evaluated");
      }
    },
    //获取数据
    status(Status) {
      this.$api.Basemanager.Baseadministratorevaluation(
        this.item.reservationId,
        this.user.id
      )
        .then(res => {
          this.gridData = res.data;
          let Arr = [];
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].status === Status) {
              res.data[i].commentTime = transitionTime(res.data[i].commentTime);
              Arr.push(res.data[i]);
              if (res.data[i].score) {
                this.gridData[i].score = res.data[i].score / 2;
              }
            }
            this.gridData = Arr;
          }
          this.dialogTableVisible = true;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查看评价
    Seetheevaluation(item) {
      this.item = item;
      this.radio1 = "未评价";
      this.status("not_evaluated");
    },
    // 批量评价
    batchEvaluation() {
      this.dialogTableVisibleone = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let Add = {
            orgaIds:[],
            date:'',
            baseId: this.user.baseId,
            content: {
              score: 5 * 2,
              content: this.ruleForm.remark
            }
          };
          if (this.ruleForm.Timeone) {
            Add.date = this.ruleForm.Timeone;
          }
          if (this.value) {
            Add.orgaIds.push(this.value);
          }
          this.$api.Basemanager.batchEvaluation(Add)
            .then(res => {
              if (res.code == 200) {
                this.open1("成功", "评价成功", "success");
                this.Time();
                this.dialogTableVisibleone = false;
                this.$refs["ruleForm"].resetFields();
              } else {
                this.open1("失败", "请选择日期", "warning");
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.loading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 改变默认的页数
    handleCurrentChange(val) {
      this.loading = true;
      this.currentPage = val;
      let Time = [];
      let base = JSON.parse(sessionStorage.getItem("user"));
      for (let i = 0; i < this.value1.length; i++) {
        Time.push(this.value1[i].toJSON());
      }
      if (Time.length === 0) {
        this.open1("失败", "请选择日期", "warning");
      } else {
        this.$api.Basemanager.evaluateAXIOS(
          Time[0],
          Time[1],
          base.baseId,
          this.currentPage,
          10
        )
          .then(res => {
            this.tabData = res.data.rows;
            this.transitionTime();
            this.loading = false;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    handleClose() {
      this.dialogTableVisibleone = false;
      this.$refs["ruleForm"].resetFields();
    },
    open1(title, content, type) {
      this.$notify({
        title: title,
        message: content,
        type: type
      });
    }
  }
};
</script>
<style scoped>
.evaluate {
  width: 100%;
}
.box-card {
  width: 100%;
  padding-bottom: 20px;
}
.evaluate .box-card .block {
  width: 100%;
  float: left;
  padding-bottom: 20px;
}
.evaluate .box-card .box-basename {
  padding-top: 15px;
  height: 20px;
}
.evaluate .box-card .box-basename p {
  float: left;
  line-height: 20px;
}
.evaluate .box-card .box-name {
  height: 20px;
}
.evaluate .box-card .box-name .spanName {
  float: left;
  font-weight: bold;
  font-size: 22px;
  line-height: 20px;
}
.evaluate .box-card .box-name .spanPhone {
  float: left;
  font-size: 18px;
  margin-left: 50px;
}
.evaluate .box-card .boxtime-wrapper p {
  margin-top: 15px;
}
.evaluate .box-card .box-make {
  height: 45px;
}
.evaluate .box-card .box-make p {
  float: left;
  line-height: 45px;
}
.box-col {
  width: 100%;
}
.evaluate .List-wrapper {
  width: 100%;
  border: 1px solid #ebeef5;
  padding: 15px 0px 15px 10px;
  transition: 0.5s;
}
.evaluate .List-wrapper:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.evaluate .List-wrapper .dialoa-name {
  padding-right: 15px;
  height: 22px;
}
.evaluate .List-wrapper .dialoa-name .spanOne {
  font-size: 20px;
  font-weight: bold;
  float: left;
}
.evaluate .List-wrapper .dialoa-name .spanTwo {
  font-size: 16px;
  float: right;
  line-height: 22px;
}
.evaluate .List-wrapper .dialoa-name .spanthree {
  font-size: 16px;
  float: left;
  line-height: 22px;
  margin-left: 40px;
}
.evaluate .List-wrapper .dialoa-content {
  font-size: 18px;
}
</style>
